<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="header"
      mode="horizontal"
      active-text-color="#1989FA"
      text-color="#8CC4FD"
      algin="center"
      router
    >
      <el-menu-item>
        <div class="header-logo">
          <img src="../assets/logo6.png" />
        </div>
      </el-menu-item>
      <el-menu-item index="blogs" @click="saveNavState('blogs')">
        <i class="iconfont icon-shouye"></i>&nbsp;首页
      </el-menu-item>
      <el-menu-item index="archives" @click="saveNavState('archives')">
        <i class="iconfont icon-huabanfuben"></i>&nbsp;归档
      </el-menu-item>
      <el-menu-item index="tags" @click="saveNavState('tags')">
        <i class="iconfont icon-biaoqian"></i>&nbsp;标签
      </el-menu-item>
      <el-menu-item index="categories" @click="saveNavState('categories')">
        <i class="iconfont icon-leimupinleifenleileibie"></i>&nbsp;分类
      </el-menu-item>
      <el-menu-item index="link" @click="saveNavState('link')">
        <i class="iconfont icon-link"></i>&nbsp;友链
      </el-menu-item>
      <el-menu-item index="msgboard" @click="saveNavState('msgboard')">
        <i class="iconfont icon-liuyan1"></i>&nbsp;留言
      </el-menu-item>
      <el-menu-item index="tool" @click="saveNavState('tool')">
        <i class="iconfont icon-gongjudown"></i>&nbsp;工具
      </el-menu-item>
      <el-menu-item index="write" @click="saveNavState('write')">
        <i class="iconfont icon-edit"></i>&nbsp;创作
      </el-menu-item>
      <el-menu-item>
        <el-input placeholder="请输入内容" v-model="inputValue" size="small" clearable>
          <el-button slot="append" icon="el-icon-search" class="search-btn"></el-button>
        </el-input>
      </el-menu-item>
      <el-dropdown placement="bottom">
        <el-avatar :size="40" :src="user.avatar"></el-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <a href="/#/login">登录</a>
          </el-dropdown-item>
          <el-dropdown-item>
            <a href="/#/register">注册</a>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-link type="danger" :underline="false" @click="logout">退出</el-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu>
    <!-- <el-menu></el-menu> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 'blogs',
      // 搜索内容
      inputValue: '',
      user: {
        username: 'Zhang Huan',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      }
    }
  },
  methods: {
    logout() { },
    saveNavState(state) {
      this.activeIndex = state
    }
  }
}
</script>
<style lang="less" scoped>
.header-logo img {
  height: 55px;
  margin-left: 20px;
}
.el-menu--horizontal > .el-menu-item {
  // margin: 0 10px;
  box-sizing: border-box;
}
.el-menu--horizontal > .el-menu-item a,
.el-menu--horizontal > .el-menu-item a:hover {
  color: #67c23a;
  text-decoration: none;
}
.search-btn {
  padding: 6px 5px;
}
.el-dropdown {
  margin-top: 10px;
}
</style>
